<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        /*  *是通配符选择器，选中页面所有元素 */
        *{
            /*消除浏览器的默认样式*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }
        .container{
            width:600px;
            margin :20px auto;

        }
        
        h1{
            text-align: center;

        }
        p{
            text-align: center;
            color: rgb(138, 138, 133);
        }
        .row{
            /* 开启弹性布局*/
            display:flex;
            height:30px;
            /*水平方向居中*/
            justify-content: center;
            /*垂直方向居中*/
            align-items: center;
        }
        .row span{
            width: 80px;
        }
        .row input{
            width: 200px;
            height: 22px;
        }
        .row button{
            width: 300px;
            height: 28px;
            color:aliceblue;
            background-color: orange;
            /*去掉边框*/
            border: none;
            border-radius: 5px;
        }
        /*点击时候的反馈*/
        .row button:active{
            background-color: goldenrod;

        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后，点击提交，信息会显示到下方表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>

    </div>
    <script>
        //实现提交操作，点击提交按钮，就能把用户输入的内容提交到页面上显示
        //点击的时候，获取到三个输入框中的文本内容
        //创建一个新的div.row,把内容构造到这个div中即可。
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');

        let button = document.querySelector('button');
        button.onclick = function(){
            //1.获取到3个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == ''|| to == ''|| msg == ''){
                return;
            }
            //2.构造一个新的div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from+'对' + to +'说：'+msg;
            containerDiv.appendChild(rowDiv);
            //3.清空之前的输入框内容
            for(let input of inputs){
                input.value = ''; 
            }
        }
    </script>
    
</body>
</html>